<template>
<div style=" background:rgba(255,255,255,0.3);">


  <h2>昨日累计：{{yesterdayCount}}</h2>
  <h2>本周累计：{{weekCount}}</h2>
  <h2>本月累计：{{monthCount}}</h2>
  <h2>本季累计：{{seasonCount}}</h2>
  <h2>本年累计：{{yearCount}}</h2>
  <hr>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="line1" style="width: 100%;height:600px; "></div>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="line2" style="width: 100%;height:600px;  "></div>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="bing" style="width: 100%;height:600px;"></div>


</div>
</template>

<script>
import Vue from "vue";


export default {
  name: "Main",
  data(){
    return{
      p_name : '',
      detailTypes:
          [{type1Name:'饮食服务', type2Names:['餐馆']},
            {type1Name:'超市', type2Names:['小超市','大超市']},
            {type1Name:'食品', type2Names:['谷物', '薯类', '豆类', '食用油和食用油脂', '蔬菜及食用菌', '畜肉类', '禽肉类', '水产品', '蛋类', '奶类', '干鲜瓜果类', '糖果糕点类', '其他食品']}
            , {type1Name:'饮料', type2Names:['可乐','雪碧','其他']}
            , {type1Name:'烟酒', type2Names:['烟草', '酒类']}
            , {type1Name:'衣类', type2Names:['服装', '服装材料', '其他衣类及配件', '衣类加工服务费']}
            , {type1Name:'鞋类', type2Names:['鞋', '鞋类配件及加工服']}
            , {type1Name:'租赁房房租', type2Names:['租赁公房房租', '租赁私房房租']}
            , {type1Name:'住房保养、维修及', type2Names:['住房装潢和维修', '物业管理费', '住房其他保养、维']}
            , {type1Name:'水、电、燃料及其', type2Names:['水', '电', '燃料', '取暖费', '其他水、电、燃料']}
            , {type1Name:'自有住房折算租金', type2Names:['用不到']}
            , {type1Name:'家具及室内装饰品', type2Names:['家具', '家具材料', '室内装饰品']}
            , {type1Name:'家用器具', type2Names:['大型家用器具', '小型家用电器', '家用电动工具和设']}
            , {type1Name:'家用纺织品', type2Names:['床上用品', '窗帘门帘', '其他家用纺织品']}
            , {type1Name:'家庭日用杂品', type2Names:['洗涤及卫生用品', '厨具、餐具、茶具', '家用手工工具', '其他家庭日用杂品']}
            , {type1Name:'个人护理用品', type2Names:['化妆品', '其他个人护理用品']}
            , {type1Name:'家庭服务', type2Names:['家政服务', '家庭设备修理']}
            , {type1Name:'交通', type2Names:['交通工具', '交通工具用燃料等', '交通工具使用和维', '交通费']}
            , {type1Name:'通信', type2Names:['通信工具', '电信服务', '邮递服务']}
            , {type1Name:'教育', type2Names:['学前教育', '小学教育', '初中教育', '高中教育', '中专职高教育', '高等教育', '其他教育和培训']}
            , {type1Name:'文化和娱乐', type2Names:['文化和娱乐耐用消', '其他文化和娱乐用', '文化和娱乐服务', '一揽子旅游度假服']}
            , {type1Name:'医疗器具及药品', type2Names:['药品', '滋补保健品', '医疗卫生器具', '保健器具']}
            , {type1Name:'医疗服务', type2Names:['门诊医疗费', '住院医疗费']}
            , {type1Name:'其他用品', type2Names:['首饰、手表', '未列明的其他用品']}
            , {type1Name:'其他服务', type2Names:['旅馆住宿', '美容、美发和洗浴', '社会保护', '保险', '金融', '未列明的其他服务']}
          ],
      viewCookies1:Vue.prototype.viewCookies1,
      viewCookies2:Vue.prototype.viewCookies2,
      yesterdayCount:JSON.parse(this.getCookie(this.viewCookies1[0])).value,
      weekCount:JSON.parse(this.getCookie(this.viewCookies1[1])).value,
      monthCount:JSON.parse(this.getCookie(this.viewCookies1[2])).value,
      seasonCount:JSON.parse(this.getCookie(this.viewCookies1[3])).value,
      yearCount:JSON.parse(this.getCookie(this.viewCookies1[4])).value,
    }
  },
  methods:{
    te:function () {

      this.showBing(
          [
                  {value:235, name:'吃饭花销' },
                  {value:274, name:'零食花销'},
                  {value:310, name:'p花销'},
                  {value:335, name:'其他花销'},
                  {value:400, name:'不该花的花销'},
                  {value:400, name:'demo'}
                ],'bing'
      );

      for (let index=1;index<=2;index++) {
        let day7time = [];
        let day7value = [];
        let day7cookie = JSON.parse(this.getCookie(this.viewCookies2[index-1]));
        for (let i = day7cookie.length - 1; i >= 0; i--) {
          day7time.push(day7cookie[i].time.substring(index==1?8:5,11));
          day7value.push(day7cookie[i].value);
        }
        this.showLine(day7time, day7value, 'line'+index,this.viewCookies2[index-1]);
      }

      if (Vue.prototype.globalYesterdayCount != 1) return

      alert(Vue.prototype.globalYesterdayCount)
      var count = 0;
      let list=[]


      for (let i = 0; i < this.detailTypes.length; i++) {
        let type1Name = this.detailTypes[i].type1Name;
        let type2Names = this.detailTypes[i].type2Names;
        for (let j = 0; j < type2Names.length; j++) {
          let string = type2Names[j];
          if (string != undefined) count++;
          list.push(type1Name+'-'+string)
        }
      }

      alert(count)
      // console.log(list)
    },
    // te2:function () {
    //   // console.log(document.cookie);
    //   var cs='yesterday={"time":"2021-11-27","value":95}; ' +
    //          'week={"time":"2021-11-22","value":95}; ' +
    //       'month={"time":"2021-11","value":95}; ' +
    //       'season={"time":"2021-4","value":95}; ' +
    //       'year={"time":2021,"value":95}; ' +
    //       'lately7Day=[{"time":"2021-11-27","value":20},{"time":"2021-11-26","value":0},{"time":"2021-11-25","value":0},{"time":"2021-11-24","value":0},{"time":"2021-11-23","value":0},{"time":"2021-11-22","value":0},{"time":"2021-11-21","value":0}]; ' +
    //       'lately6Month=[{"time":"2021-11","value":20},{"time":"2021-10","value":0},{"time":"2021-9","value":0},{"time":"2021-8","value":0},{"time":"2021-7","value":0},{"time":"2021-6","value":0}]';
    //   let split1 = cs.split(';');
    //   let myCookies=[]
    //   for (let i = 0; i < split1.length; i++) {
    //     let element = split1[i];
    //     let strings = element.split('=');
    //     let cname = strings[0];
    //     let cvalue = strings[1];
    //     var demo =[cname,cvalue]
    //     myCookies.push(demo)
    //
    //   }
    //   // // console.log(myCookies)
    //
    //   let viewCookies1 = Vue.prototype.viewCookies1;
    //   for (let i = 0; i < viewCookies1.length; i++) {
    //     let isCookieKey = viewCookies1[i];
    //     //看一下 myCookies有没有这个，如果有就
    //   }
    // },
    showLine:function (p_x, p_y,eid,t) {
      var echarts = require('echarts')

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(eid) );

      // 指定图表的配置项和数据
      var option = {
        title: {
          text:  t
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: p_x
        },
        yAxis: {},
        series: [{
          type: 'line',
          smooth:false,
          color:'red',
          lineStyle:{type: 'solid',width:'4'},
          data: p_y
        },
          {
            type: 'bar',
            // barMaxWidth:'20',
            data: p_y
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    showBing:function (p_xy,eid) {
      var echarts = require('echarts')

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(eid));

      myChart.setOption({
        title: {
          text: '测试：'
        },
        series : [
          {
            name: '访问来源',
            avoidLabelOverlap : false,
            markLine:{label: {show : false}},
            type: 'pie',    // 设置图表类型为饼图
            radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: p_xy
          }
        ]

      })
    },
    getCookie: function (cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      // console.log("获取cookie,现在循环")
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        // console.log(c)
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1){
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
  },

  created() {
    setTimeout(this.te,1000)
  }
}
</script>

<style scoped>

</style>
